<template>
  <div id="app">
    <transition name="ly" mode="out-in">
      <keep-alive>
        <component :is="coms[currentIndex]"></component>
      </keep-alive>
    </transition>

    <div class="tabbar">
      <span
        :class="{ active: currentIndex == index }"
        @click="currentIndex = index"
        v-for="(item, index) in btns"
        :key="index"
        >{{ item }}</span
      >
    </div>
  </div>
</template>

<script>
// import Bao from "./components/Bao.vue";
// import List from "./components./List.vue";

import Bao from "./components/Bao.vue";
// import List from "./components/List.vue"
import List from "./components/List.vue";
import Dingdan from "./components/Dingdan.vue";
import Wode from "./components/Wode.vue";

export default {
  name: "App",
  components: {},
  data() {
    return {
      // count:88888,
      coms: [List, Bao, Dingdan, Wode],
      btns: ["首页", "爆爆团", "订单", "我的"],
      currentIndex: 0, //用来保存下标
    };
  },
};
</script>



<style>
* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
.tabbar {
  background: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #ccc;
  padding: 15px;
  box-sizing: border-box;
}
.tabbar .active {
  color: red;
}

.ly-enter {
  /* 入场动画的初始状态 */
  transform: scale(0);
  
}
.ly-enter-active {
  /* 入场动画执行过程中的状态 */
  transition: all 0.5s;
}
.ly-enter-to {
  /* 入场动画执行结束时的状态 */
  transform: scale(1);
}

.ly-leave {
  /* 离场动画的初始状态 */
  opacity: 1;
}
.ly-leave-active {
  /* 离场动画执行过程中的状态 */
  transition: all 0.5s;
}
.ly-leave-to {
  /* 离场动画执行结束时的状态 */
  opacity: 0;
  
}
</style>
